<template>
	<div>
		<el-row type="flex">
			<el-col :span="12" style="text-align: left;">
				<el-button type="danger" plain @click="delMore()">批量删除</el-button>
			</el-col>
			<el-col :span="12">
				<div class="grid-content bg-purple-dark">
					<el-input placeholder="请输入内容" v-model="input3" class="input-with-select" 
						show-word-limit>
						<el-select v-model="select" slot="prepend" placeholder="请选择">
							<el-option label="货运单号" value="danhao">
								
							</el-option>
							
						</el-select>
						<el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
					</el-input>
				</div>
			</el-col>
		</el-row>


		<el-row type="flex">
			<el-col :span="24">
				<div class="grid-content bg-purple-dark">
					<el-table :data="tableData" border style="width: 100%;" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="55"></el-table-column>
						<el-table-column fixed prop="freightContract.fid" label="货运单编号" width="250">
						</el-table-column>
						<el-table-column prop="complaint" label="客户姓名" width="120">
						</el-table-column>
						<el-table-column prop="complainContent" label="投诉内容" width="250">
						</el-table-column>
						<el-table-column prop="complainTime" label="投诉时间" width="170">
							<template slot-scope="scope">
								<span v-html="timeTrans(scope.row.complainTime)"></span>
							</template>
						</el-table-column>
						<el-table-column prop="replyContent" label="回复内容" width="250">
						</el-table-column>
						<el-table-column prop="replyTime" label="处理时间" width="170">
							<template slot-scope="scope">
								<span v-html="timeTrans(scope.row.replyTime)"></span>
							</template>
						</el-table-column>
						<el-table-column prop="respondent" label="处理人" width="100">
						</el-table-column>

						<el-table-column fixed="right" label="操作" width="120">
							<template slot-scope="scope">
								<el-button type="danger" plain size="small" @click="del(scope.$index)">
									删除历史
								</el-button>
							</template>
						</el-table-column>
					</el-table>
					<div class="block">

						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="currentPage" :page-sizes="[5,10]" :page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper" :total="total">
						</el-pagination>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	//输入框
	export default {

		data() {
			return {
				input3: '',
				select: '',
				//表格
				tableData: [],
				multipleSelection: [],

				//分页
				currentPage: 1,
				pageSize: 5,
				total: 5,
			}
		},
		//初始化数据
		created() {
			//查询所有:第一页
			this.getReplyPageChange();
			//查询已处理总条数
			this.getReplyTotal();
		},
		//表格方法
		methods: {
			//模糊搜索:
			search(){
				
				this.axios.post("http://localhost:8080/complain/" + this.input3 )
					.then((res) => {
						this.tableData=[];
						this.tableData[0] = res.data.data;
						this.total = 1;
					});
				
				
				
			},
			//格式化时间
			timeTrans(time) {
				let date = new Date(new Date(time).getTime() + 8 * 3600 * 1000)
				date = date.toJSON();
			
			
				date = date.substring(0, 19).replace('T', ' ')
			
				return date;
			},
			//查询已处理总条数
			getReplyTotal() {
				this.axios.get("http://localhost:8080/complain/", "")
					.then((res) => {
						let tData = [];
						let j = 0;
						for (let i = 0; i < res.data.data.length; i++) {
							if (res.data.data[i].iswether) {
								tData[j] = res.data.data[i];
								j++;
							}
						}
						this.total = tData.length;
					})
			},
			//已处理分页方法
			getReplyPageChange() {
				this.axios.get("http://localhost:8080/complain/" + this.currentPage + "/" + this.pageSize, "")
					.then((res) => {
						let tData = [];
						let j = 0;
						for (let i = 0; i < res.data.data.list.length; i++) {
							if (res.data.data.list[i].iswether) {
								tData[j] = res.data.data.list[i];
								j++;
							}
						}
						this.tableData = tData;
					})

			},

			handleClick(row) {
				console.log(row);
			},
			//分页
			handleSizeChange(val) {
				this.tableData = [];
				this.pageSize = val;
				this.getReplyPageChange();
			},
			handleCurrentChange(val) {
				this.tableData = [];
				this.currentPage = val;
				this.getReplyPageChange();
			},
			//删除方法
			del(index) {

				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//删除数据库对应数据
					this.axios.delete("http://localhost:8080/complain/" + this.tableData[index].id, "")
						.then((res) => {
							this.getReplyTotal();
						})
					// console.log(this.tableData[index].name)
					this.tableData.splice(index, 1);
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//多选的值存到数组
			handleSelectionChange(val) {

				this.multipleSelection = val;

			},
			//批量删除
			delMore() {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					const length = this.multipleSelection.length;

					for (let i = 0; i < length; i++) {
						for (let j = 0; j < this.tableData.length; j++) {
							if (this.multipleSelection[i] == this.tableData[j]) {
								//删除后端数据
								this.axios.delete("http://localhost:8080/complain/" + this.tableData[j].id, "")
									.then((res) => {

									})

								//删除前端页面
								this.tableData.splice(j, 1);
								//刷新总条数
								this.getReplyTotal();
							}
						}


					}

					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}




	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.bg-purple {
		background: #d3dce6;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.el-select .el-input {
		width: 130px;

	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}

	.block {
		background-color: #ffffff;
	}
</style>
